<template>
  <div class="dashboard-container">
    <div class="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="item" @click="handleRouter">
            <div class="left">
               <i class="el-icon-circle-plus-outline" style="font-size: 35px; color: #fff;"></i>
            </div>
            <div class="right">
              <p class="title">创建自动评估</p>
              <p class="desc">实时便捷，快的不止一点</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="content">
      <div class="title">
        任务列表
        <div class="right">
          <p style="margin-bottom: 4px;">
            土地面积:
            <el-input size="mini" placeholder="最小" v-model="params.minLandsArea" style="width: 130px;margin-right: 5px;"></el-input>-
            <el-input size="mini" placeholder="最大" v-model="params.maxLandsArea" style="width: 130px;margin-right: 5px;"></el-input>
            建筑面积:
            <el-input size="mini" placeholder="最小" v-model="params.minBuildingsArea" style="width: 130px;margin-right: 5px;"></el-input>-
            <el-input size="mini" placeholder="最大" v-model="params.maxBuildingsArea" style="width: 130px;margin-right: 5px;"></el-input>
          </p>
          <el-date-picker
            size="mini"
            v-model="params.startFinishTime"
            type="datetime"
            placeholder="开始时间"
            style="width: 130px;margin-right: 5px;"
            value-format="timestamp"	
          >
          </el-date-picker>
          <el-date-picker
            size="mini"
            v-model="params.endFinishTime"
            type="datetime"
            placeholder="结束时间"
            style="width: 130px;margin-right: 5px;"
            value-format="timestamp"	
          >
          </el-date-picker>
          <el-input placeholder="产权人" v-model="params.propertyOwner" size="mini" style="width: 100px;margin-right: 5px;"></el-input>
          <el-select v-model="params.useRightType" placeholder="土地使用权类型" class="buildInput" size="mini" style="width: 130px;" clearable>
            <el-option v-for="uItem in useRightList" :label="uItem" :value="uItem" :key="uItem"></el-option>
          </el-select>
          <el-input placeholder="地址" v-model="params.address" size="mini" style="width: 100px;margin-right: 5px;"></el-input>
          <el-button type="primary" icon="el-icon-search" plain size="mini" @click="getData">查询</el-button>
        </div>
      </div>
      <el-table :data="list">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column label="产权人" prop="propertyOwner"></el-table-column>
        <el-table-column label="地址">
          <template slot-scope="{row}">
            {{row.items.length>0?row.items[0].address:''}}
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="{row}">
            {{ row.items.length }}
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="类型"></el-table-column>
        <el-table-column prop="createTime" label="评估时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <!-- <a :href="OSS_BASE_URL+row.reportUrl" target="_blank" v-if="row.reportUrl" style="margin-right: 10px;"> -->
              <el-button type="text" size="mini" @click="handleDown(row)">下载报告</el-button>  
            <!-- </a> -->
            <!-- <el-button type="text" size="mini">查看详情</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageIndex+1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageCount"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enquiryGetList } from '@/api/enquiry'
import { OSS_BASE_URL, typeNameList, useRightList } from '@/utils/common'
import { transfromData } from '@/utils/tools'
import moment from 'moment'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return {
      useRightList,
      list: [],
      total: 0,
      params: {
        pageCount: 10,
        pageIndex: 0,
        startFinishTime: '',
        endFinishTime: '',
        propertyOwner: '',
        address: '',
        useRightType: ''
      },
      OSS_BASE_URL,
      typeNameList
    }
  },
  mounted(){
    this.handleSearch();
  },
  methods: {

    // 下载
    handleDown(row) {
            return fetch(OSS_BASE_URL+row.reportUrl).then(response=>{
                if(!response.ok){
                    throw new Error('network not ok')
                }
                return response.blob();
            }).then(blob=>{
                const url = window.URL.createObjectURL(blob);
                const elink = document.createElement('a')
                elink.style.display = 'none'
                elink.href = url;
                elink.download = row.propertyOwner + '所属位于' + row.items[0].address + '工业不动产询价单.docx'
                document.body.appendChild(elink)
                elink.click()
                window.URL.revokeObjectURL(elink.href)// 释放对象
                document.body.removeChild(elink)// 移除元素

            }).catch(error=>{
                console.log('error', error)
            })
    },
    handleSearch(){
      this.params.pageIndex = 0;
      this.getData();
    },
    // 修改每页数量
    handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getData();
    },
    // 切换分页
    handleCurrentChange(val){
        this.params.pageIndex = val - 1;
        this.getData();
    },
    async getData(){
      let data = await enquiryGetList(this.params);
      this.total = data.totalCount;
      this.list = data.list.map(item=>{
        item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
        item.typeName = transfromData(typeNameList, item.type)
        return item;
      });
    },
    handleRouter(){
      this.$router.history.push({ path: '/enquiry/add' })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 30px;
    background: #f7fafa;
    .top{
      .item{
        height: 128px;
        background: #41DCED url('../../images/home_icon1.png') no-repeat;
        background-position: calc(100% - 20px);

        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        .left{
          display: inline-block;
          width: 60px;
          vertical-align: top;
          padding-top: 40px;
          padding-left: 20px;
        }
        .right{
          display: inline-block;
          text-align: left;
          color: #fff;
          .title{
            font-size: 24px;
            font-weight: bold;
            margin: 0;
            padding-top: 40px;
          }
          .desc{
            font-size: 14px;
          }
        }
      }
    }
    .content{
      padding: 20px;
      border-radius: 5px;
      margin-top: 20px;
      background:#fff;
      .title{
        font-weight: bold;
        .right{
          float: right;
          // padding-top: 40px;
          margin-right: 30px;
          font-weight: normal;
          text-align: right;
        }
      }
      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
